<template>
  <div class="app-container">
    <QueryForm v-model="form" @search="getShopList" />
    <StoreTable :list="storeList" />
    <BasePagination
      v-model="page.page"
      :total="totalCount"
      @change="pageOnChange"
    />
  </div>
</template>
<script>
import { getShopList } from '@/api/shop/index'
import QueryForm from './_components/QueryForm.vue'
import StoreTable from './_components/StoreTable.vue'
import {received} from '@/utils/util'
export default {
  name: 'StoreManage',
  components: { QueryForm, StoreTable },
  data() {
    return {
      form: {
        name: '',
        city: ''
      },
      storeList: [],
      totalCount: 0,
      page: {
        page: 1,
        size: 100
      },
      inputDialog: {
        visible: false,
        content: {}
      }
    }
  },
  created() {
    received('store.add.succes', this.getShopList)
    this.getShopList()
  },
  methods: {
    async getShopList() {
      this.showAppLoading()
      const params = {
        paramObject: this.form,
        ...this.page
      }
      const res = await getShopList(params)
      this.hideAppLoading()
      if (!res.result) return
      this.storeList = res.data.dataList
      this.totalCount = res.data.totalCount
      this.page.page = res.data.page
    },

    pageOnChange(row) {
      this.page.page = row.page;
      if (row.pageSize) {
        this.page.size = row.pageSize;
      }
      this.getShopList()
    },
  }
}
</script>
